<!--
 * @Descripttion: 支付记录
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-29 14:18:59
-->
<template>
    <div class="lb-app-sweep-record">
        <top-nav></top-nav>
        <div class="page-main">
            <div class="page-search-form">
                <el-form
                :inline="true"
                :model="searchForm"
                ref="searchForm"
                >
                    <el-form-item label="客户昵称" prop="nickName">
                        <el-input placeholder="请输入客户昵称" v-model="searchForm.nickName"></el-input>
                    </el-form-item>
                    <el-form-item label="员工姓名" prop="staff_name">
                        <el-input placeholder="请输入员工姓名" v-model="searchForm.staff_name"></el-input>
                    </el-form-item>
                    <el-form-item label="日期" prop="">
                        <el-date-picker
                        v-model="date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time='["00:00:00","23:59:59"]'
                        value-format="timestamp">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                      <lb-button size="medium" type="primary" icon="el-icon-search" style="margin-right:5px" @click="getTableDataList(1)">{{$t('action.search')}}</lb-button>
                      <lb-button size="medium" icon="el-icon-refresh-left" style="margin-right:5px" @click="resetForm('searchForm')">{{$t('action.reset')}}</lb-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table
            v-loading='loading'
            :data="tableData"
          :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
            style="width: 100%">
              <el-table-column
                prop="nickName"
                label="客户昵称">
              </el-table-column>
              <el-table-column
                label="客户微信头像">
                <template slot-scope="scope">
                  <lb-image  :src="scope.row.avatarUrl" />
                </template>
              </el-table-column>
              <el-table-column
                label="支付时间">
                <template slot-scope="scope">
                <p>{{scope.row.pay_time | handleTime(1)}}</p>
                <p>{{scope.row.pay_time | handleTime(2)}}</p>
                </template>
              </el-table-column>
              <el-table-column
                prop="order_code"
                label="订单号">
              </el-table-column>
              <el-table-column
                prop="pay_price"
                label="支付金额">
              </el-table-column>
              <el-table-column
                prop="staff_id"
                label="员工ID">
              </el-table-column>
              <el-table-column
                prop="staff_name"
                label="员工姓名">
              </el-table-column>
          </el-table>
          <lb-page
          :batch='false'
          :page='searchForm.page'
          :pageSize='searchForm.limit'
          :total='total'
          @handleSizeChange='handleSizeChange'
          @handleCurrentChange='handleCurrentChange'
          >
        </lb-page>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      date: [],
      searchForm: {
        staff_name: '',
        nickName: '',
        start_time: '',
        end_time: '',
        page: 1,
        limit: 10
      },
      total: 0,
      tableData: [],
      totalMoney: 100235
    }
  },
  created () {
    this.getTableDataList()
  },
  methods: {
    resetForm (name) {
      this.date = []
      this.$refs[name].resetFields()
      this.getTableDataList(1)
    },
    getTableDataList (flag) {
      if (flag) this.searchForm.page = 1
      this.loading = true
      let {searchForm, date} = this
      if (date && date.length !== 0) {
        searchForm.start_time = date[0]
        searchForm.end_time = date[1]
      } else {
        searchForm.start_time = ''
        searchForm.end_time = ''
      }
      this.$api.reductionPayRecordList(searchForm).then(res => {
        console.log(res)
        this.loading = false
        if (res.code === 200) {
          // this.totalMoney = res.data.total_money
          this.tableData = res.data.data
          this.total = res.data.total
        }
      })
    },
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getTableDataList()
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
    .lb-app-sweep-record{
        width: 100%;
        .el-input{
          width: 200px;
        }
        .page-main{
            width: 100%;
            .el-table{
                img{
                    width: 60px;
                    height: 60px;
                }
            }
        }
    }
</style>
